<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>04监视属性</title>
	</head>
	<body>
		<div id="app">
			<h1>info.a={{info.a}}</h1>
			<button @click="btn">info.a+1</button>
			<h1>info.b={{info.b}}</h1>
			<button @click="btn1">info.b+1</button>
		</div>
		<script src="../vue.js"></script>
		<script>
			//深度监视: deep
			//  (1).Vue中的watch默认不监测对象内部值的改变（ 一层）。
			//  (2).配置deep: true可以监测对象内部值改变(多层）。
			//备注:
			// 	(1).vue自身可以监测对象内部值的改变， 但Vue提供的watch默认不可以!
			//  (2).使用watch时根据数据的具体结构, 决定是否采用深度监视。
			var app = new Vue({
				el: '#app',
				//输出的数据
				data: function() {
					return {
						info: {
							a: 1,
							b: 0
						}
					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {
					btn() {
						return this.info.a++
					},
					btn1() {
						return this.info.b++
					}
				},
				//监视属性
				watch: {
					//监视多级结构中某个属性的变化
					// "info.a": {
					// 	handler(newV, oldV) {
					// 		console.log("info.a被修改了", newV, oldV)
					// 	}
					// },
					// "info.b": {
					// 	handler(newV, oldV) {
					// 		console.log("info.b被修改了", newV, oldV)
					// 	}
					// }
					//监视多级结构中所有属性的变化
					info: {
						deep: true,//深度监视
						handler(newValue, oldValue) {
							console.log("info被修改了", newValue.a, oldValue.a)
						}
					}
				},
			});
		</script>
	</body>
</html>
